<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <link rel="stylesheet" type="text/css" href="index2.css">-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="index2.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div class="header">
        <!-- 设置logo -->
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!-- 设置菜单 -->
        <div class="menu" onmouseleave="show_menu1()">
            <div class="menu_title" onclick="show_menu()">
                <a href="#">内容分类</a></div>
            <ul id="menu1">
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <!-- 设置用户登录 -->
        <div class="auth">
            <ul>
                <li><a href="#" id="cartlink" @click="cartdetail()">购物车</a></li>
                <!--				<li><a href="#" id="cartlink" @click="visible = true">购物车</a></li>-->
                <!--				<li><a href="#" id="cartlink" @click="cartdetail();visible=true">购物车</a></li>-->
                <li><a href="/register.html">注册</a></li>


                <li>
                    <a href="#" id="loginlink" @click="logindetail()">登录</a>
                </li>
            </ul>
        </div>

    </div>
<!--    position:absolute;width:500px;margin-top: 250px;margin-left: 350px-->
    <div class="register-wrapper">
        <div id="register" style="position:absolute;width:500px;margin-top: 130px;margin-left: 500px">
            <h1 style="text-align: center">注册</h1>
            <el-form
                    :model="ruleForm2"
                    status-icon
                    :rules="rules2"
                    ref="ruleForm2"
                    label-width="0"
                    class="demo-ruleForm"
                    fit="false"
                    >
                <el-form-item prop="tel">
                    <el-input
                            v-model="ruleForm2.tel"
                            auto-complete="off"
                            placeholder="请输入邮箱">
                    </el-input>
                </el-form-item>
                <el-form-item prop="smscode" class="code">
                    <el-input
                            v-model="ruleForm2.smscode"
                            placeholder="验证码"></el-input>
                    <el-button
                            type="primary"
                            :disabled="isDisabled"
                            @click="sendCode">{{ buttonText }}
                    </el-button>
                </el-form-item>

                <el-form-item prop="username">
                    <el-input
                            v-model="ruleForm2.username"
                            auto-complete="off"
                            placeholder="输入用户名"></el-input>
                </el-form-item>

                <el-form-item prop="pass">
                    <el-input
                            type="password"
                            v-model="ruleForm2.pass"
                            auto-complete="off"
                            placeholder="输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input
                            type="password"
                            v-model="ruleForm2.checkPass"
                            auto-complete="off"
                            placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            type="primary"
                            @click="submitForm('ruleForm2')"
                            style="width:100%;">注册
                    </el-button>
                    <p class="login" @click="gotoLogin">已有账号？立即登录</p>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        var vue = new Vue({
            el: '#register',
            // name: "Register",
            data() {
                // <!--验证手机号是否合法-->
                let checkTel = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请输入邮箱"));
                    } else if (!this.checkMobile(value)) {
                        callback(new Error("邮箱不合法"));
                    } else {
                        callback();
                    }
                };
                //  <!--验证码是否为空-->
                let checkSmscode = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请输入邮箱验证码"));
                    } else {
                        callback();
                    }
                };
                // <!--验证密码-->
                let validatePass = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请输入密码"));
                    } else {
                        if (this.ruleForm2.checkPass !== "") {
                            this.$refs.ruleForm2.validateField("checkPass");
                        }
                        callback();
                    }
                };
                // <!--二次验证密码-->
                let validatePass2 = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请再次输入密码"));
                    } else if (value !== this.ruleForm2.pass) {
                        callback(new Error("两次输入密码不一致!"));
                    } else {
                        callback();
                    }
                };
                return {
                    ruleForm2: {
                        pass: "",
                        checkPass: "",
                        tel: "",
                        smscode: "",
                    },
                    rules2: {
                        pass: [
                            {validator: validatePass, trigger: "change"},
                            {min: 6, max: 10, message: "密码须为6-10个字符", trigger: "blur"},
                        ],
                        checkPass: [
                            {validator: validatePass2, trigger: "change"},
                            {min: 6, max: 10, message: "密码须为6-10个字符", trigger: "blur"},
                        ],
                        tel: [{validator: checkTel, trigger: "change"}],
                        smscode: [{validator: checkSmscode, trigger: "change"}],
                    },
                    buttonText: "发送验证码",
                    isDisabled: false, // 是否禁止点击发送验证码按钮
                    flag: true,
                };
            },
            methods: {
                // <!--发送验证码-->
                sendCode() {
                    axios({
                        method: "POST",
                        url: "/user/vcode",
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                            // 'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        data: {
                            "email": this.ruleForm2.tel,
                        }
                    }).then(resp => {
                        if (this.checkMobile(this.ruleForm2.tel)) {
                            let time = 60;
                            this.buttonText = "已发送";
                            this.isDisabled = true;
                            if (this.flag) {
                                this.flag = false;
                                this.$message({
                                    message: '发送成功',
                                    type: 'success'
                                });
                                let timer = setInterval(() => {
                                    time--;
                                    this.buttonText = time + " 秒";
                                    // this.$message("发送成功，注意查收")
                                    if (time === 0) {
                                        clearInterval(timer);
                                        this.buttonText = "重新获取";
                                        this.isDisabled = false;
                                        this.flag = true;
                                    }
                                }, 1000);
                            }
                        }
                    }).catch((failResponse) => {
                        console.log('failResponse');
                        return false
                    })

                    // axios.post('user/vcode', {
                    //     "email": this.ruleForm2.tel,
                    //     // headers:{"Content-Type":"application/x-www-form-urlencoded"}
                    // }).then(resp => {
                    //     if (this.checkMobile(tel)) {
                    //         let time = 60;
                    //         this.buttonText = "已发送";
                    //         this.isDisabled = true;
                    //         if (this.flag) {
                    //             this.flag = false;
                    //             let timer = setInterval(() => {
                    //                 time--;
                    //                 this.buttonText = time + " 秒";
                    //                 this.message("发送成功，注意查收")
                    //                 if (time === 0) {
                    //                     clearInterval(timer);
                    //                     this.buttonText = "重新获取";
                    //                     this.isDisabled = false;
                    //                     this.flag = true;
                    //                 }
                    //             }, 1000);
                    //         }
                    //     }
                    // }).catch((failResponse) => {
                    //     console.log('failResponse');
                    //     return false
                    // })
                },
                // <!--提交注册-->
                submitForm(formName) {

                    this.$refs.ruleForm2.validate((valid) => {
                        if (valid) {
                            axios({
                                method: "POST",
                                url: "/user/register",
                                headers: {
                                    "Content-Type": "application/json;charset=UTF-8",
                                    // 'Content-Type': 'application/x-www-form-urlencoded',
                                },
                                data: {
                                    // tel: this.ruleForm2.tel,
                                    // smscode: this.ruleForm2.smscode,
                                    // pass: this.ruleForm2.pass,
                                    // checkPass: this.ruleForm2.checkPass,
                                    "email":this.ruleForm2.tel,
                                    "password":this.ruleForm2.pass,
                                    "username":this.ruleForm2.username,
                                    "vcode":this.ruleForm2.smscode
                                },
                            })
                                .then((res) => {
                                    if (res.data==='SECCUSS') {
                                        this.$notify({
                                            title: "提示",
                                            message: "注册成功",
                                            duration: 2000,
                                        });
                                        // vue.$router.push("/index.html");
                                        window.location.href = "/index.html";
                                    }
                                    else if(res.data==='DUPLICATE'){
                                        this.$notify({
                                            title: "提示",
                                            message: "邮箱已注册",
                                            duration: 2000,
                                        });
                                    }
                                    else {
                                        this.$notify({
                                            title: "提示",
                                            message: "注册失败",
                                            duration: 2000,
                                        });
                                    }
                                })
                                .catch((failResponse) => {
                                    this.$notify({
                                        title: "错误",
                                        message: failResponse,
                                        duration: 2000,
                                    });
                                });
                        } else {
                            console.log("error submit!!");
                            return false;
                        }
                    });
                },
                // <!--进入登录页-->
                gotoLogin() {
                    this.$router.push({
                        path: "/index.html",
                    });
                },
                // 验证手机号
                checkMobile(str) {
                    let re = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                    if (re.test(str)) {
                        return true;
                    } else {
                        return false;
                    }
                },
            },
        })
    </script>

</body>
</html>